<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        border: 1px solid;
      }
      .active {
        background-color: red;
      }
      .fun {
        width: 500px;
        height: 500px;
      }
    </style>
  </head>
  <body>
    <div class="box active myclass"></div>
    <button>点我修改类名</button>
    <script>
      var btn = document.querySelector("button");
      var box = document.querySelector(".box");
      /* btn.onclick = function () {
        // box.className = "active";这样替换掉后就没有宽高,div会消失
        //在之前的类名基础上加上active 类名
        box.className += " active";
        //box.className = box.className + " active"
      }; */

      //通过classList 对象操作  类名
      //1.添加一个类名: 元素.classList.add("类名")
      // btn.onclick = function () {
      //   box.classList.add("fun");
      // };

      //2.删除一个类名:   元素.classList.remove()
      // btn.onclick = function () {
      //   box.classList.remove("box");
      // };

      //3.获取类名的个数:  元素.classList.length
      // btn.onclick = function () {
      //   console.log(box.classList.length);
      // };

      //4.判断元素是否包含某个类名:  元素.classList.contains
      //包含就返回true,否则就返回false
      // btn.onclick = function () {
      //   console.log(box.classList.contains("box")); //true
      // };

      //5.可以切换某个类名:  如果有这个类名就删除这个类名 如果没有这个类名就添加这个类名
      // btn.onclick = function () {
      //   box.classList.toggle("fun");
      // };
      // //检测元素是否有fun类名  如果有  就删除  如果没有  就添加
    </script>
  </body>
</html>
